<template>
  <div>
    <h2>完整的生命周期钩子监听示例</h2>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="toggleChild" style="margin-left: 10px;">Toggle Child Component</button>
    
    <!-- 条件渲染子组件 -->
    <HelloComponent 
      v-if="showChild"
      :count="count" 
      @vue:mounted="handleMounted"
      @vue:before-mount="handleBeforeMount"
      @vue:before-update="handleBeforeUpdate"
      @vue:updated="handleUpdated"
      @vue:before-unmount="handleBeforeUnmount"
      @vue:unmounted="handleUnmounted"
    />
    
    <div style="margin-top: 20px;">
      <h3>生命周期事件日志:</h3>
      <ul>
        <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HelloComponent from './Hello.vue'

const count = ref(0)
const showChild = ref(true)
const logs = ref<string[]>([])

const increment = () => {
  count.value++
}

const toggleChild = () => {
  showChild.value = !showChild.value
}

const addLog = (message: string) => {
  logs.value.push(`${new Date().toLocaleTimeString()}: ${message}`)
  console.log(message)
}

const handleBeforeMount = () => {
  addLog('子组件即将挂载 (@vue:before-mount)')
}

const handleMounted = () => {
  addLog('子组件已挂载 (@vue:mounted)')
}

const handleBeforeUpdate = () => {
  addLog('子组件即将更新 (@vue:before-update)')
}

const handleUpdated = () => {
  addLog('子组件已更新 (@vue:updated)')
}

const handleBeforeUnmount = () => {
  addLog('子组件即将卸载 (@vue:before-unmount)')
}

const handleUnmounted = () => {
  addLog('子组件已卸载 (@vue:unmounted)')
}
</script>